http://jquerymobile.com/designs/
年末年始で Web サイトを作る（７）
WordPress のスマートフォン対応
83
ダウンロード jQuery Mobile を使う準備
年末年始で Web サイトを作る（７）
WordPress のスマートフォン対応
84
ダウンロード jQuery Mobile を使う準備
年末年始で Web サイトを作る（７）
WordPress のスマートフォン対応
85
テーマフォルダの中に、 jQuery と jQuery Mobile を入れる。
ココでは、
js フォルダを 作り、
その中に
入れました。
jQuery Mobile を使う準備
年末年始で Web サイトを作る（７）
WordPress のスマートフォン対応
86
js フォルダの中身
jQuery と
jQuery Mobile の サイトから
ダウンロードした ファイル。
jQuery Mobile を使う準備
年末年始で Web サイトを作る（７）
WordPress のスマートフォン対応
87
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.mobile-1.0b3.min.css" />
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.6.4.min.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.mobile-1.0b3.min.js"></script>
通常の
WordPress
テーマにおいて 読み込むテンプレートタグ。jQuery Mobile を使う準備
meta タグの中に、 jQuery Mobile を読み出すタグを書く。
多くのテーマフォルダでは、 header.php ファイル
年末年始で Web サイトを作る（７）
WordPress のスマートフォン対応
88
meta タグの中に、 jQuery Mobile を読み出すタグを書く。
<link rel="stylesheet" href="<?php ks_theme_url(); ?>js/jquery.mobile-1.0b3.min.css" />
<script src="<?php ks_theme_url(); ?>js/jquery-1.6.4.min.js"></script>
<script src="<?php ks_theme_url(); ?>js/jquery.mobile-1.0b3.min.js"></script>
多くのテーマフォルダでは、 header.php ファイル
Ktai Style
で読み込む場合のタグ。→
これで、ktai-themes
フォルダを 読み込んでくれる。jQuery Mobile を使う準備
年末年始で Web サイトを作る（７）
WordPress のスマートフォン対応
89
WordPress
のコアファイルには、jQuery
が同梱されているので、以下の
WordPress
のテンプレートタグで、読み込むこともできます。<?php wp_enqueue_script('jquery'); ?>
jQuery Mobile を使う準備
年末年始で Web サイトを作る（７）
WordPress のスマートフォン対応
90
<body>
<div data-role="page" data-theme="c">
<div data-role="header" data-theme="a">
<h1><?php echo get_bloginfo('name'); ?></h1>
</div>
<div data-role="content" data-theme="c">
～～～
</div>
<div data-role="footer" data-theme=“a">
～～～
</div>
</div>
（１）テーマの色を確定
年末年始で Web サイトを作る（７）
WordPress のスマートフォン対応
91
<div data-role="header" data-theme="a">
<a href="<?php echo get_bloginfo('url'); ?>"
data-icon="home">TOP</a>
<h1><?php echo get_bloginfo('name'); ?></h1>
</div>
サイト
URL
（
WordPress
のテンプレートタグ）（２）アイコンもタグだけで実現。
記事上の共通部分は、
header.php ファイルを用意
年末年始で Web サイトを作る（７）
WordPress のスマートフォン対応
92
<ul data-role="listview" data-inset="true">
<li data-role=“list-divider”>
墨田区</li>
<li><a href=“ ××× .html“>
隅田公園</a></li>
<li><a href=“ ××× .html“>
錦糸公園</a></li>
</ul>
HTML では・・・
トップページは、
home.php ファイルを用意
（３）リストビューもタグだけで実現。
リストもタグ指定で簡単。
WordPress
で、カテゴリごとにリスト化も簡単。年末年始で Web サイトを作る（７）
WordPress のスマートフォン対応
93
<?php
$my_query = new WP_Query(array(
'cat' => 1,
'posts_per_page' => -1,
'orderby' => 'comment_count', 'order' => 'DESC'
));
?>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider"><?php echo get_catname('1'); ?></li>
<?php while($my_query->have_posts()) : $my_query->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
HTML から
WordPress テーマ化
（３）リストビュー
年末年始で Web サイトを作る（７）
WordPress のスマートフォン対応
94